<template>
  <section class="echarts-box">
    <div ref="mainChart" :style="{width:'100%',height:'100%'}"></div>
  </section>
</template>

<script>
import { TsccChartBase } from "./TsccChartBase";
const echarts = require("echarts/lib/echarts");
// 引入饼图
require("echarts/lib/chart/pie");
// 引入渐变色相关组件
require("echarts/lib/component/graphic");
// 引入提示框和标题组件
// require('echarts/lib/component/title')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/legend')

export default {
  components: {},
  props: {
    chartData: Array, // 图表数据
    requiredSettings: Object, // 必选配置项
    optionalSettings: Object // 可选配置项
  },
  data() {
    return {
      defaultSettings: {},
      option: {
        title: {
          text: "",
          textStyle: {
            color: "#fff"
          }
          //   top: "5%"
        },
        // tooltip: {
        //   trigger: "axis"
        // },
        legend: {
          data: [],
          padding: [20, 0, 0, 0],
          textStyle: {
            color: "#fff"
          },
          icon: "circle",
          bottom:'middle',
          left:'center',
          right:'center',
          top:'middle'
        },
        // grid: {
        //   left: "1%",
        //   right: "1%",
        //   bottom: "13%",
        //   containLabel: true
        // },
        series: [
          {
            type: "pie",
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                shadowBlur: 10,
                shadowColor: "rgba(30, 30, 30,0.2)"
              }
            },
            label: {
              normal: {
                show: false
                // position: "center"
              },
              emphasis: {
                show: true,
                formatter: function(param) {
                  return param.name + "\n" + param.percent.toFixed(0) + "%";
                },
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold"
                }
              }
            },
            radius:'',
            center:[],
            data: []
          }
        ]
      },
      echartsInstance: null
    };
  },
//   mixins: [TsccChartBase], // 混入公有属性
  computed: {},

  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.echartsInstance = echarts.init(this.$refs.mainChart);
      let settings = Object.assign(
        {},
        this.defaultSettings,
        this.optionalSettings
      );
      let option = this.option;
      option.title.text = settings.title
      option.series[0].center = settings.center
      option.series[0].radius = this.requiredSettings.radius
      option.legend.bottom = settings.bottom
      option.legend.top = settings.top
      option.legend.data = this.requiredSettings.nameArr;
      // 数据赋值
      for (let i = 0; i < this.chartData.length; i++) {
        option.series[0].data.push({
            value :this.chartData[i],
            name:this.requiredSettings.nameArr[i],
            itemStyle: { color: this.optionalSettings.color[i] }
         });
       
      }
      // 渲染曲线
      this.renderEChart(this.option);
    },
    renderEChart(option) {
      this.echartsInstance.setOption(option);
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (!this.echartsInstance) {
          return;
        }
        this.option.series.forEach((item, index) => (item.data = val[index]));
        this.renderEChart(this.option);
      },
      immediate: true
    }}
};
</script>
<style scoped>
.echarts-box {
  height: 100%;
}
</style>